<template>
    <el-card class="!border-none" shadow="never">
        <router-link
            :to="{
                path: getRoutePath('pay.pay_way/setPayWay')
            }"
        >
            <el-button type="primary">设置支付方式</el-button>
        </router-link>
    </el-card>
    <el-card class="!border-none mt-[15px]" shadow="never">
        <div class="font-medium mb-7">
            微信小程序
            <span class="form-tips"> 在微信小程序中付款的场景 </span>
        </div>
        <el-table size="large" class="mt-[14px]" :data="pages['1']">
            <el-table-column label="图标">
                <template #default="{ row }">
                    <el-avatar :size="50" :src="row.icon" />
                </template>
            </el-table-column>
            <el-table-column prop="pay_way_name" label="支付方式"> </el-table-column>
            <el-table-column label="默认支付">
                <template #default="{ row }">
                    <el-tag v-if="row.is_default === 1">默认</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="状态">
                <template #default="{ row }">
                    <span v-if="row.status === 1" style="color: #67c23a">开启</span>
                    <span v-if="row.status === 0" style="color: #f56c6c">关闭</span>
                </template>
            </el-table-column>
        </el-table>
    </el-card>

    <el-card class="!border-none mt-[15px]" shadow="never">
        <div class="font-medium mb-7">
            微信公众号
            <span class="form-tips"> 在微信公众号H5页面中付款的场景，公众号类型一般为服务号 </span>
        </div>
        <el-table size="large" class="mt-[14px]" :data="pages['2']">
            <el-table-column label="图标">
                <template #default="{ row }">
                    <el-avatar :size="50" :src="row.icon" />
                </template>
            </el-table-column>
            <el-table-column prop="pay_way_name" label="支付方式">
                <template #default="{ row }"> {{ row.pay_way_name }}</template>
            </el-table-column>
            <el-table-column label="默认支付">
                <template #default="{ row }">
                    <el-tag v-if="row.is_default === 1">默认</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="状态">
                <template #default="{ row }">
                    <span v-if="row.status === 1" style="color: #67c23a">开启</span>
                    <span v-if="row.status === 0" style="color: #f56c6c">关闭</span>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <el-card class="!border-none mt-[15px]" shadow="never">
        <div class="font-medium mb-7">
            H5支付
            <span class="form-tips"> 在浏览器H5页面中付款的场景 </span>
        </div>
        <el-table size="large" class="mt-[14px]" :data="pages['3']">
            <el-table-column label="图标">
                <template #default="{ row }">
                    <el-avatar :size="50" :src="row.icon" />
                </template>
            </el-table-column>
            <el-table-column prop="pay_way_name" label="支付方式"> </el-table-column>
            <el-table-column label="默认支付">
                <template #default="{ row }">
                    <el-tag v-if="row.is_default === 1">默认</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="状态">
                <template #default="{ row }">
                    <span v-if="row.status === 1" style="color: #67c23a">开启</span>
                    <span v-if="row.status === 0" style="color: #f56c6c">关闭</span>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>
<script lang="ts" setup>
import { getPayWay } from '@/api/setting/pay'
import { getRoutePath } from '@/router'

const pages = ref<any>({})
const getData = async () => {
    pages.value = await getPayWay()
}
getData()
</script>
